<template>
	<view class="content bg_com">
		<!-- 顶部 -->
		<com-nav-bar class="nav_login" :style="navStyle" :navColor="navColor">
			<template>
				<view class="_nav" @click="navBack">
					<i class="iconfont icon-31fanhui1"></i>
				</view>
			</template>
		</com-nav-bar>
		<!-- 背景 -->
		<view class="header_bg">
			<image class="bg_img" src="../../static/homepage_bg.png" mode="scaleToFill"></image>
		</view>
		<!-- 个人信息 -->
		<view class="info_box">
			<view class="top row_center">
				<view class="icon">
					<image class="img_val" v-if="showUser.avatar" :src="showUser.avatar" mode="scaleToFill"></image>
					<image class="img_val" v-else src="../../static/logo.jpg" mode="scaleToFill"></image>
				</view>
				<view class="name_id">
					<view class="name row_center">
						<view class="val">
							{{showUser.nick || '--'}}
						</view>
						<image v-if="showUser.gender == 1" class="img_val" src="../../static/man.png" mode=""></image>
						<image v-else-if="showUser.gender == 2" class="img_val" src="../../static/women.png" mode="">
						</image>
					</view>
					<view class="id_warp row_center">
						<image class="img_val" src="../../static/id2x.png" mode=""></image>
						{{showUser.erbanNo || '--'}}
						<view class="copy" @click="copyFun">
							复制
						</view>
					</view>
				</view>
				<view class="eidt" v-if="isMy" @click="editJump">
					<image class="img_val" src="../../static/edit.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="sign">
				<image class="yh" src="../../static/yinhao.png" mode=""></image>
				<view class="sign_txt line2_explit">
					{{showUser.userDesc || '--'}}
				</view>
			</view>
		</view>
		<view id="tabs" :style="{top: `${stypeTop}px`}" :class="{'fixed_c': isFixed}" class="tab_warp row_center">
			<view class="_item" @click="changeTab(item)" :class="{active: index == activeIndex}"
				v-for="(item, index) in tabList" :key="index">
				{{item.name}}
			</view>
			<view class="_underline" :style="{left: tabLeft + 'rpx'}"></view>
		</view>
		<view class="tab_zw" v-if="isFixed"></view>
		<view class="main_box">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" @change="changeSwiper" :current="activeIndex"
				:indicator-dots="false" :autoplay="false" :duration="500">
				<swiper-item>
					<view id="content-wrap0">
						<view class="photo_album row_center" >
							<view class="_item" v-for="(item, index) in privatePhoto" :key="index">
								<image class="img_val" @click="previewImage(index)" :src="item.photoUrl" mode="scaleToFill">
								</image>
							</view>
						</view>
						<view class="nodata" v-if="privatePhoto.length <= 0">
							<image class="nodata_img" src="../../static/nodata.png" mode="scaleToFill"></image>
							<view class="msg">
								暂无内容
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view id="content-wrap1">
						<view class="gift_warp row_center">
							<view class="_item col_conter" v-for="(item, index) in giftWallVo.itemVos" :key="index">
								<view class="icon">
									<image class="img_val" :src="item.picUrl" mode=""></image>
								</view>
								<view class="gift_info_box col_conter">
									<view class="name">
										{{item.giftName}}
									</view>
									<view class="num">
										x{{item.reciveCount}}
									</view>
								</view>
							</view>
						</view>
						<view class="nodata" v-if="(activeIndex == 1) && giftWallVo.itemVos.length <= 0">
							<image class="nodata_img" src="../../static/nodata.png" mode="scaleToFill"></image>
							<view class="msg">
								暂无内容
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="photo_album row_center" v-if="activeIndex == 0">
				<view class="_item" v-for="(item, index) in privatePhoto" :key="index">
					<image class="img_val" @click="previewImage(index)" :src="item.photoUrl" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="gift_warp row_center" v-if="activeIndex == 1">
				<view class="_item col_conter" v-for="(item, index) in giftWallVo.itemVos" :key="index">
					<view class="icon">
						<image class="img_val" :src="item.picUrl" mode=""></image>
					</view>
					<view class="gift_info_box col_conter">
						<view class="name">
							{{item.giftName}}
						</view>
						<view class="num">
							x{{item.reciveCount}}
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- <view class="footer_zw"></view> -->
		<view v-if="!isMy" class="footer row_center">
			<!-- <view class="btn lt" @click="jumpMassage">
				聊天
			</view> -->
			<view class="btn gz" v-if="showUser.isLike == 0" @click="openModal(0)">
				关注
			</view>
			<view class="btn gz ungz" v-if="showUser.isLike == 1" @click="openModal(1)">
				已关注
			</view>
		</view>
		<com-modal @confirm="focusRemove" :msg="msg" ref="modal" />
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import comModal from '@/components/com-modal/com-modal.vue'
	export default {
		computed: mapState(['hasLogin', 'user', 'tickets', 'identity']),
		components: {
			comModal
		},
		data() {
			return {
				isMy: true,
				targetUid: -1,
				msg: '确定取消关注？',
				activeIndex: 0,
				tabList: [{
					name: '相册',
					value: 0
				}, {
					name: '礼物墙',
					value: 1
				}],
				tabLeft: 60,
				navColor: 'transparent',
				scrollY: false,
				navStyle: '',
				totalHeight: this.customBar,
				tabTop: 0,
				isFixed: false,
				stypeTop: 0,
				showUser: {}, // 用户信息
				privatePhoto: [], // 相册
				photoList: [],
				giftWallVo: [], //礼物墙
				swiperheight: 100
			}
		},
		watch: {
			isFixed(val, oldVal) {
				console.log(val, oldVal)
				if (val) {
					this.stypeTop = this.totalHeight;
				} else {
					this.stypeTop = 0;
				}
				console.log(this.stypeTop)
			}
		},
		onLoad(e) {
			if (e.type && e.uid + '' !== this.identity.uid + '') {
				this.isMy = false;
				this.targetUid = e.uid;
				this.userDetail(e.uid);
			} else {
				this.isMy = true;
				this.getMine();
				this.userDetail(this.identity.uid);
			}
			setTimeout(() => {
				this.initFun();
			}, 100)
		},
		onPageScroll(e) {
			let topHeight = e.scrollTop;
			let navOp = 0;
			navOp = topHeight / this.totalHeight;
			const styles = `background: rgba(23,21,37, ${navOp});`;
			this.navStyle = topHeight > 10 ? styles : '';
			if (e.scrollTop > ((this.tabTop - this.totalHeight) - 10) && this.isFixed) {
				return;
			}
			if (e.scrollTop >= ((this.tabTop - this.totalHeight) - 10) && !this.isFixed) {
				this.isFixed = true;
			} else {
				this.isFixed = false;
			}
		},
		methods: {
			initFun() {
				const query_t = uni.createSelectorQuery().in(this);
				query_t.select('#tabs').boundingClientRect();
				query_t.exec((res) => {
					console.log('res' + res);
					this.tabTop = res[0].top
					console.log(this.tabTop);
				})
			},
			jumpMassage() {
				uni.navigateTo({
					url: `../../notice/index/index?targetUid=${this.targetUid}`
				})
			},
			editJump() {
				uni.navigateTo({
					url: '../profile/profile'
				})
			},
			//手动切换题目
			changeSwiper(e) {
				this.activeIndex = e.detail.current;
				if (this.activeIndex == 0) {
					this.tabLeft = 60;
				} else if (this.activeIndex == 1) {
					this.tabLeft = 190;
				}
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.activeIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperheight = res[0].height;
						console.log(this.swiperheight + '===========================')
					}
				});
			},
			navBack() {
				uni.navigateBack()
			},
			copyFun() {
				uni.setClipboardData({
					data: this.showUser.erbanNo + '',
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				});
			},
			changeTab(item) {
				if (item.value == 0) {
					this.tabLeft = 60;
				} else if (item.value == 1) {
					this.tabLeft = 190;
				}
				this.activeIndex = item.value;
			},
			openModal(index) {
				if (index == 0) { // 此时还没有关注
					this.focusAdd();
				} else if (index == 1) { // 此时已经关注了 需要取消关注
					this.$refs.modal.open();
				}

			},
			/* 取消关注某人 */
			focusRemove() {
				this.$api.focusRemove({
					uid: this.identity.uid,
					likedUid: this.targetUid,
					ticket: this.tickets[0].ticket
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						this.$refs.modal.close();
						this.userDetail(this.targetUid);
					}
				})
			},
			/* 关注某人 */
			focusAdd() {
				this.$api.focusAdd({
					uid: this.identity.uid,
					likedUid: this.targetUid,
					ticket: this.tickets[0].ticket
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '关注成功',
							icon: 'none'
						})
						this.userDetail(this.targetUid);
					}
				})
			},
			/* 查看图片 */
			previewImage(index) {

				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.photoList //预览图片的地址，必须要数组形式=
				})
			},
			/* 获取用户信息 */
			userDetail(targetUid) {
				this.$api.userDetail({
					uid: this.identity.uid,
					ticket: this.tickets[0].ticket,
					targetUid
				}).then(res => {
					this.photoList = [];
					this.privatePhoto = res.data.privatePhoto;
					this.giftWallVo = res.data.giftWallVo;
					res.data.privatePhoto.forEach(item => {
						this.photoList.push(item.photoUrl)
					})
					this.showUser = res.data;
					//动态设置swiper的高度
					this.$nextTick(() => {
						this.setSwiperHeight();
					});
				})
			},
			// 获取我的个人主页
			getMine() {
				this.$api.getMine({
					uid: this.identity.uid,
					ticket: this.tickets[0].ticket
				}).then(res => {
					this.showUser = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/iconfont/iconfont.css";

	@font-face {
		font-family: 'iconfont';
		src: url('~@/static/iconfont/iconfont.ttf');
	}

	.nav_login {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;

		._nav {
			padding-left: 22rpx;

			.iconfont {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	@import './index.scss';
</style>
